<template>
  <div class="count-container">
    <div class="count-box">
      <van-button icon="minus" @click.stop="subCount" v-show="count > 0" />
      <div id="count" v-show="count > 0">{{ itemType === 5 ? comboCount : count }}</div>
      <van-button icon="plus" @click.stop="addCount" :disabled="itemType === 5 || goodsItem.stock < 1" type="primary" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  props: {
    goodsItem: {
      type: Object
    },
    combo: {
      type: Object
    },
    itemType: {
      type: Number
    }
  },
  name: 'Count',
  data() {
    return {
      count: 0,
      comboCount: 1
    }
  },
  computed: {
    // init data
    ...mapState({
      initGoodsList: state => state.home.shopsGoods,
      shoppingCart: state => state.home.shoppingCart,
      initShoppingCart: state => state.home.initShoppingCart
    })
  },
  watch: {
    // sync page amount
    shoppingCart: {
      immediate: true,
      handler() {
        var item = this.goodsItem
        var cart = this.shoppingCart
        var num = 0
        // sync combo amount
        if (item.type === 5) {
          cart.forEach(o => {
            if (o.id === item.id) {
              num++
            }
          })
          this.$set(this._data, 'count', num)
        } else {
          this.$set(this._data, 'count', this.goodsItem.amount)
        }
      },
      deep: true
    },
    // 监听是否有套餐id
    combo: {
      handler(data) {
        if (data) return this.addCount(data)
      }
    }
  },
  methods: {
    // 减少商品
    subCount() {
      var item = this.goodsItem
      var data = { id: item.id, type: item.type, delete: true }
      var num = item.amount
      if (num > 0 || item.type === 5) {
        this.$store.commit('changeSpCart', data)
        this.$set(this, 'count', item.amount)
      }
      // 同步商品数量为 0 状态
      var list = this.initGoodsList
      var cart = this.initShoppingCart
      var flag = cart.find(o => o.id === item.id)
      if (!flag) {
        var syncItem = list.find(o => o.id === item.id)
        this.$set(syncItem, 'amount', 0)
      }
    },
    // 增加商品
    addCount(data) {
      var item = {}
      if (data.id) {
        console.log('套餐')
        item = this._.cloneDeep(data)
      } else {
        console.log('非套餐')
        item = this.goodsItem
      }
      if (item.type === 5 && !data.id) return this.$router.push({ name: 'combo', query: { id: item.id, source: this.$route.query.source } })
      // console.log(item.name, item)
      var num = item.amount
      if (num < 10 || !num) {
        this.$store.commit('changeSpCart', item)
        this.$set(this, 'count', item.amount)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.count-box {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 12px;
  max-width: 640px;
  right: 0;
  #count {
    width: 21px;
    text-align: center;
    font-size: 15px;
  }
  .van-button {
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 50%;
  }
  .van-button--primary {
    border: 1.5px solid #ffbf05;
    background-color: #ffbf05;
    font-size: 1em;
  }
  .van-button--default {
    border: 1.5px solid #a6a6a6;
    color: #a6a6a6;
    font-size: 1em;
  }
}
</style>
